<template>
    <div class="Box">
        <div class="box">
        <backcon></backcon>
        <div class="dlzcbox">
            <p class="title">请登录</p>
            <div class="dlzc">
                    <div class="userbox">
                        <div class="userinput">
                            <span>用户名：</span><input type="text" v-model="username" placeholder="请写入手机号" @blur="blurname">
                        </div>
                        <span v-if="phonewrong" class="wrong">格式不对！</span>
                        <span v-else></span>
                    </div>
                    <div class="userbox">
                        <div class="userinput">
                            <span>密码：</span><input type="password" v-model="userpsd" placeholder="密码6-18位" @blur="blurpsd">
                        </div>
                        <span v-if="psdwrong" class="wrong">密码6-18位</span>
                        <span v-else></span>
                    </div>
                </div>
            <div class="zc" @click="zc()">
                <p>还没有<i>注册</i>？请点击此处进行注册！</p>
            </div>
            <div class="dlok" @click="dlok">登录</div>
        </div>
        </div>
    </div>
</template>
<script>
 import backcon from '../backcon.vue'

export default {
    components:{backcon},
    data() {
        return {
            username:'',
            userpsd:'',
            phonewrong:0,
            psdwrong:0,
            result:0
        }
    },
    methods:{
        blurname(){
            var phone = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
            var testphone =phone.test(this.username);
            //this.username=username
            if(!testphone){
                this.phonewrong=1
                //window.console.log("用户名格式不正确！")
            }else{this.phonewrong=0}
        },
        blurpsd(){
            var psd = /^[0-9]{6,18}$/;
            var testpsd =psd.test(this.userpsd);
            //this.username=username
            if(!testpsd){
                this.psdwrong=1
                //window.console.log("用户名格式不正确！")
            }else{this.psdwrong=0}
        },
        zc(){
             this.$router.push({
              path:"/zc"
              })
        },
        dlok(){
            let info = new URLSearchParams();
            info.append("username", this.username);
            info.append("userpsd", this.userpsd);
            if((this.phonewrong==0&&this.psdwrong==0)&&(this.username!=''&&this.userpsd!='')){
                this.axios({
                    url:"http://localhost:4444/dl",
                    method:"post",
                        data: info
                    }).then((ok)=>{
                        this.result=ok.data.result
                        localStorage.setItem("username",ok.data.data.uname)
                        //window.console.log(ok.data.data.uname)
                        // vuex 存储登录信息
                       // this.$store.state.login = true;//如果已经登录将变量login设置为true
                        //this.$store.state.userInfo.username=ok.data.data.uname;//将后台登录后用户信息给userInfo
                        window.console.log(this.$store.state.userInfo.username)
                        if(this.result==1){
                            this.$router.push({
                            path:"/wode"
                          })
                        }
                    })
            }
            
        }
    }
}
</script>
<style scoped>
.box{width: 90%;margin: .2rem auto;height: 100%;}
.dlzcbox{margin: 0 auto; width: 100%;margin-top:1.5rem;}
.dlzcbox .title{font-size: .3rem;text-align: center;color: #D73384;font-weight: bold}
.dlzc div{margin: .1rem 0}
.dlzc{width: 100%;height: 100%;}
.dlzc input{border: .01rem solid pink}

.userbox{width: 100%;display: flex;justify-content: space-between;align-items: center}
.userinput{width: 70%; display: flex;justify-content: space-between;align-items: center} 
.wrong{color: red}


.zc p{font-size:.16rem;color: #999;text-align:left;}
.zc i{color: #000;font-style: normal}

.dlok{margin: .4rem auto;text-align: center;font-size: .16rem;font-weight: bold;
color: #D73384;border: .02rem solid #D73384;width: 1rem;padding: .05rem;border-radius: .05rem}
</style>